<template>
	<view>
		<uni-section type="line" class="mb-10" title="单选">
			<view style="padding: 0 20rpx">
				<lfj-dropdown-box placeholder="请选择内容" v-model="value1" :localdata="localdata" @change="change"></lfj-dropdown-box>
			</view>
		</uni-section>
		<uni-section type="line" class="mb-10" title="单选搜索">
			<view style="padding: 0 20rpx">
				<lfj-dropdown-box v-model="value1" :localdata="localdata" filterable @change="change"></lfj-dropdown-box>
			</view>
		</uni-section>
		<uni-section type="line" class="mb-10" title="多选">
			<view style="padding: 0 20rpx">
				<lfj-dropdown-box v-model="value2" :localdata="localdata" multiple @change="change"></lfj-dropdown-box>
			</view>
		</uni-section>
		<uni-section type="line" class="mb-10" title="多选搜索">
			<view style="padding: 0 20rpx">
				<lfj-dropdown-box v-model="value2" :localdata="localdata" multiple filterable @change="change"></lfj-dropdown-box>
			</view>
		</uni-section>
		<uni-section type="line" class="mb-10" title="右侧文字">
			<view style="padding: 0 20rpx">
				<lfj-dropdown-box v-model="value2" :localdata="localdata" rightTextShow multiple @change="change"></lfj-dropdown-box>
			</view>
		</uni-section>
		<uni-section type="line" class="mb-10" title="下拉加载">
			<view style="padding: 0 20rpx">
				<lfj-dropdown-box
					v-model="value3"
					placeholder="请选择内容"
					dropDownLoading
					rightTextShow
					multiple
					:loadStatus="loadStatus"
					:localdata="localdata"
					@lower="lower"
					@change="change"
				></lfj-dropdown-box>
			</view>
		</uni-section>
		<uni-section type="line" class="mb-10" title="字段映射">
			<view style="padding: 0 20rpx">
				<lfj-dropdown-box placeholder="请选择内容" v-model="value1" :map="map" :localdata="localdata1" @change="change"></lfj-dropdown-box>
			</view>
		</uni-section>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value1: 'value3',
			value2: ['value4', 'value5'],
			value3: '',
			value4: '',
			localdata: [
				{
					text: 'value1',
					value: 'value1',
					rightText: 'rightText',
					disabled: true
				},
				{
					text: 'value2',
					value: 'value2',
					rightText: 'rightText'
				},
				{
					text: 'value3',
					value: 'value3',
					rightText: ''
				},
				{
					text: 'value4',
					value: 'value4',
					rightText: 'rightText'
				},
				{
					text: 'value5',
					value: 'value5',
					rightText: 'rightText'
				},
				{
					text: 'value6',
					value: 'value6',
					rightText: 'rightText'
				},
				{
					text: 'value7',
					value: 'value7',
					rightText: 'rightText'
				},
				{
					text: 'value8',
					value: 'value8',
					rightText: 'rightText'
				}
			],
			localdata1: [
				{
					text1: 'value1',
					value1: 'value1',
					rightText1: 'rightText',
					disabled1: true
				},
				{
					text1: 'value2',
					value1: 'value2',
					rightText1: 'rightText'
				}
			],
			map: { text: 'text1', value: 'value1', rightText: 'rightText1', disabled: 'disabled1' },
			total: 11,
			pageNum: 1,
			pageSize: 6,
			loadStatus: ''
		};
	},
	methods: {
		lower() {
			// 模拟接口数据
			let data = [
				{
					text: '新增数据1',
					value: '1ewq',
					rightText: 'rightText'
				},
				{
					text: '新增数据2',
					value: '2qwr',
					rightText: 'rightText'
				},
				{
					text: '新增数据3',
					value: '32weq',
					rightText: 'rightText'
				}
			];
			let pageNum = Math.ceil(this.total / this.pageSize);
			if (this.pageNum < pageNum) {
				this.pageNum++;
				this.loadStatus = 'loading';
				setTimeout(() => {
					this.localdata.push(...data);
				}, 2000);
			} else {
				this.loadStatus = 'nomore';
			}
		},
		change(e) {
			console.log('回显的数据', e);
		},
		confirm(e) {
			console.log('搜索');
		}
	}
};
</script>

<style></style>
